import React from 'react'
import {NavLink, BrowserRouter, Route, Redirect, Switch} from "react-router-dom";
import MyNavLink from "../../Component/MyNavLink";
import Home from './Home/Home'
import About from "./About/About";
import './index.css'

class ReactRouter extends React.Component {
    render() {
        return (
            <div>
                <div>
                    <div className="row">
                        <div className="col-xs-offset-2 col-xs-8">
                            <div className="page-header"><h2>React Router Demo</h2></div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-xs-2 col-xs-offset-2">
                            <div className="list-group">
                                {/*<a className="list-group-item active" href="./about.html">About</a>*/}
                                {/*<a className="list-group-item" href="./home.html">Home</a>*/}
                                {/*<NavLink activeClassName = "active1" className="list-group-item" to="/about">About</NavLink>*/}
                                {/*<NavLink activeClassName = "active1" className="list-group-item" to="/home">Home</NavLink>*/}

                                <MyNavLink to="/about">About</MyNavLink>
                                <MyNavLink to="/home">Home</MyNavLink>
                            </div>
                        </div>
                        <div className="col-xs-6">
                            <div className="panel">
                                <div className="panel-body">
                                    {/*<Home></Home>*/}
                                    {/*<About></About>*/}
                                    <Switch>
                                        <Route path="/about" component={About}></Route>
                                        <Route path="/home" component={Home}></Route>
                                        <Redirect to="/about"/>
                                    </Switch>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        )
    }
}

export default ReactRouter